import React from 'react'
import { ListItem } from "../utils/Type"
import { ProductCard, Button, Checkbox,Image } from 'react-vant';
type Props = {
  item: ListItem,
  add?: (id: string) => void,
  low?: (id: string) => void,
  onItemClick?: () => void,
  showCheck?: boolean,
  checkboxItem?: (id: string) => void,
}

const MyItem = (props: Props) => {
  let { item, add, low, showCheck, checkboxItem } = props
  
  return (
    <div>
    
      <ProductCard
        num={item.num}
        price={item.price}
        title={item.title}
        thumb={
          <div style={{display:"flex",justifyContent:"space-between"}}>
            {
              showCheck ? <Checkbox checked={item.checked} onClick={() => {
                checkboxItem && checkboxItem(item.id)
              }}></Checkbox>:""
            }
            <Image src={item.img} width={70} height={70}></Image>
           
          </div>
         
        }
        className='dl'
        // 调用父的点击事件
        onClick={() => {
          props.onItemClick && props.onItemClick()
        }}
        footer={
          <>
           
            {/* @ts-ignore */}
            <Button size="mini" plain style={{ marginRight: 2 }} onClick={(e:any) => {
              e.stopPropagation()
              low&&low(item.id)
            }} disabled={item.num === 0}> 减少  </Button>
            {/* @ts-ignore */}
            <Button size="mini" plain onClick={(e:any) => {
              e.stopPropagation()
               add&&add(item.id)
            }}> 增加 </Button>
          </>
        }
      />
    </div>
  )
}

// 设置props的默认值
MyItem.defaultProps = {
  showCheck:false
}

export default MyItem